<template>
    <section>
        <!-- 销售数据start -->
        <el-row class="mt-10">
            <el-col :span="24" >
                <div class="content-head">
                    销售数据
                </div>
                <table class="sale-statistic"  cellspacing="0px">
                    <thead>
                        <tr>
                            <th>
                                点击量
                            </th>
                            <th>
                                订单数
                            </th>
                            <th>
                                销量累计
                            </th>
                            <th>
                                退货退款率
                            </th>
                            <th>
                                评论数
                            </th>
                            <th>
                                好评率
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{product.product_click?product.product_click:0}}</td>
                            <td>{{product.product_click?product.product_click:0}}</td>
                            <td>{{product.product_salenum?product.product_salenum:0}}</td>
                            <td>{{product.product_click?product.product_click:0}}</td>
                            <td>{{product.product_click?product.product_click:0}}</td>
                            <td>{{product.product_click?product.product_click:0}}</td>
                        </tr>
                    </tbody>
                </table>
            </el-col>
        </el-row>
        <!-- 销售数据end -->

        <!-- 基本信息start -->
        <el-row class="mt-10">
            <el-col :span="24" >
                <div class="content-head">
                    <div>
                        <span >基本信息</span>
                    </div>
                    <div>
                        <el-button type="primary" size="small"  icon="el-icon-edit" @click="handleShowBase">
                            修改
                        </el-button>
                    </div>
                </div>
                <el-form label-position="left" label-width="100px" class="show-form">
                    <el-form-item label="商品分类">
                        <div  class="category-content"  v-if="product.selfToCategory">
                            <span v-for="(category, index) in product.selfToCategory" key="index">{{category.levelOne?category.levelOne.category_name:''}} >
                                {{category.levelTwo?category.levelTwo.category_name:""}}>
                                {{category.levelThree?category.levelThree.category_name:''}}
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <span>{{ product.product_name }}</span>
                    </el-form-item>
                    <el-form-item label="商品简介">
                        <span>{{ product.product_jingle }}</span>
                    </el-form-item>
                    <el-form-item label="商品类型">
                        <span>{{ typeFormatter }}</span>
                    </el-form-item>
                    <el-form-item label="品牌">
                        <span>{{ product.brand? product.brand.brand_name:''}}</span>
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <span>{{ parseInt(product.product_status)===1?"上架":"下架" }}</span>
                    </el-form-item>
                    <el-form-item label="是否跨境商品">
                        <span>{{ parseInt(product.is_oversea)===1?'是':'否' }}</span>
                    </el-form-item>
                    <el-form-item label="所属国家" v-show="parseInt(product.is_oversea)===1">
                        <span>{{ product.country? product.country.country_name:"" }}</span>
                    </el-form-item>
                    <el-form-item label="标题图片">
                        <div class="image-list">
                            <img :src="product.fullUrl"/>
                            <img :src="image.fullUrl" v-for="image in product.images" key="index"/>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!-- 基本信息end  -->

        <!--价格start -->
        <el-row class="mt-10">
            <el-col :span="24" >
                <div class="content-head">
                    <div>
                        <span >商品价格</span>
                    </div>
                    <div>
                        <el-button type="primary" size="small" icon="el-icon-edit" @click="handleShowPrice">
                            修改
                        </el-button>
                    </div>
                </div>
                <el-form label-position="left" label-width="100px" class="show-form">
                    <el-form-item label="售价" >
                        <span>{{ product.product_price}}</span>
                    </el-form-item>
                    <el-form-item label="VIP售价" >
                        <span>{{ product.product_vip_price}}</span>
                    </el-form-item>
                    <el-form-item label="原价" >
                        <span>{{ product.product_market_price}}</span>
                    </el-form-item>
                    <el-form-item label="成本价" >
                        <span>{{ product.product_cost_price}}</span>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--价格end  -->

        <!--属性管理 start -->
        <el-row class="mt-10">
            <el-col :span="24" >
                <div class="content-head">
                    <div>
                        <span >属性管理</span>
                    </div>
                    <div>
                        <el-button type="primary" size="small" icon="el-icon-edit" @click="handleShowParams">
                            修改
                        </el-button>
                    </div>
                </div>
                <el-form label-position="left" label-width="100px" class="show-form">
                    <el-form-item :label="param.label" v-for="(param,index) in paramsFormatter" :key="index">
                        <span>{{ param.value}}</span>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--属性管理 end -->



        <!--商品规格start -->
        <el-row class="mt-10">
            <el-col :span="24" >
                <div class="content-head">
                    <div>
                        <span >商品规格</span>
                    </div>
                    <div>
                        <el-button type="primary" size="small" icon="el-icon-edit">
                            修改
                        </el-button>
                    </div>
                </div>

                <el-form label-position="left" label-width="100px" class="options show-form">
                    <el-form-item :label="option.option_name" v-for="(option,index) in product.options" :key="index">
                        <span v-for="value in option.values" >{{ value.value_name}}</span>
                    </el-form-item>
                </el-form>
                <div class="content-head">
                    商品库存
                </div>

                <el-table style="width: 100%" :data="product.children" :header-row-style="{backgroundColor:'#f4f5fa'}" >
                    <el-table-column   v-for="(option,index) in product.options" :label="option.option_name" :key="index">
                        <span  slot-scope="scope">{{scope.row.options[index].value.value_name}}</span>
                    </el-table-column>
                    <el-table-column   label="sku码" prop="sku">
                    </el-table-column>
                    <el-table-column   label="库存" prop="quantity">
                    </el-table-column>
                    <el-table-column   label="库存预警" prop="warning_quantity">
                    </el-table-column>
                    <el-table-column   label="售价" prop="sale_price">
                    </el-table-column>
                    <el-table-column   label="原价" prop="market_price">
                    </el-table-column>
                    <el-table-column   label="成本价" prop="cost_price">
                    </el-table-column>
                    <el-table-column   label="会员价" prop="vip_price">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!--商品规格end  -->

        <!-- 物流及其他 start-->
        <el-row class="mt-10">
            <el-col :span="24" >
                <div class="content-head">
                    <div>
                        <span >物流其他</span>
                    </div>
                    <div>
                        <el-button type="primary" size="small" icon="el-icon-edit" @click="handleShowOthers">
                            修改
                        </el-button>
                    </div>
                </div>
                <el-form label-position="left" label-width="100px" class="show-form">
                    <el-form-item  label="运费模板" v-if="product.product_freight_id && product.product_type==1" >
                        <span >{{product.freightTem.template_name}}</span>
                    </el-form-item>
                    <el-form-item  label="自定义运费" v-if="!product.product_freight_id && product.product_type==1" >
                        {{product.product_freight}}
                    </el-form-item>
                    <el-form-item  label="绑定卡卷" v-if="product.card" >
                        {{product.card.card_name}}
                    </el-form-item>
                    <el-form-item  label="每人限购"  >
                        {{product.limit_num}}
                    </el-form-item>
                    <el-form-item  label="购买权限"  >
                        {{ authFormatter }}
                    </el-form-item>
                    <el-form-item  label="开售时间"  >
                        {{ product.on_sale_time }}
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!-- 物流及其他 end -->

        <!--基本信息修改 start-->
        <el-dialog  :visible.sync="visible.base" width="500px">
            <div slot="title" class="dialog-title">
                修改基本信息
            </div>
            <el-form :model="baseForm"  ref="baseForm" label-width="100px">
                <!--<el-form-item label="商品分类" prop="categories">-->
                    <!--<el-input  v-model="baseForm.categories" ></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="商品名称" prop="product_name">
                    <el-input  v-model="baseForm.product_name" ></el-input>
                </el-form-item>
                <el-form-item label="商品简介" prop="product_jingle">
                    <el-input  v-model="baseForm.product_jingle" ></el-input>
                </el-form-item>
                <el-form-item label="品牌" prop="brand_id">
                    <el-select v-model="baseForm.brand_id" filterable placeholder="请选择" value-key="brand_id" clearable>
                        <el-option
                                v-for="brand in brandOptions"
                                :label="brand.brand_name"
                                :value="brand.brand_id"
                                :key="brand.brand_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='上架状态' prop='product_status'>
                    <el-radio-group v-model='baseForm.product_status'>
                        <el-radio :label='1'>上架</el-radio>
                        <el-radio :label='0'>下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='跨境商品' prop='is_oversea'>
                    <el-radio-group v-model='baseForm.is_oversea'>
                        <el-radio :label='0'>否</el-radio>
                        <el-radio :label='1'>是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='国家' prop='product_nation_id' v-show="baseForm.is_oversea==1" >
                    <el-select v-model="baseForm.product_nation_id" filterable  placeholder="请选择">
                        <el-option
                                v-for="item in countryOptions"
                                :label="item.country_name"
                                :value="item.country_id"
                                :key="item.country_id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible.base = false">取 消</el-button>
                <el-button type="primary" @click="visible.base = false">确 定</el-button>
            </span>
        </el-dialog>
        <!--基本信息修改 end-->

        <!--价格信息修改 start-->
        <el-dialog  :visible.sync="visible.price" width="500px">
            <div slot="title" class="dialog-title">
                修改价格信息
            </div>
            <el-form :model="priceForm"  ref="priceForm" :rules='priceFormRules' label-width="100px">
                <el-form-item label="售价" prop="product_price">
                    <el-input  v-model="priceForm.product_price" ></el-input>
                </el-form-item>
                <el-form-item label="原价" prop="product_market_price">
                    <el-input  v-model="priceForm.product_market_price" ></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="product_cost_price">
                    <el-input  v-model="priceForm.product_cost_price" ></el-input>
                </el-form-item>
                <el-form-item label="黄金会员价" prop="product_vip_price">
                    <el-input  v-model="priceForm.product_vip_price" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible.price = false">取 消</el-button>
                <el-button type="primary" @click="handleSavePrice">确 定</el-button>
            </span>
        </el-dialog>
        <!--价格信息修改 end -->

        <!--属性信息修改 start-->
        <el-dialog  :visible.sync="visible.params" width="600px">
            <div slot="title" class="dialog-title">
                修改属性信息
            </div>
            <el-form  ref="paramsForm"   label-width="80px">
                <el-form-item   :label="'属性-'+(index+1)" v-for="(param,index) in paramsForm" :key="index">
                    <el-input v-model="paramsForm[index].label" style="width:200px;" prop="label">
                    </el-input>
                    <el-input v-model="paramsForm[index].value" style="width:200px;" prop="value"></el-input>
                    <i class="el-icon-error delete-params" @click="handleDeleteParam(index)"></i>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible.params = false">取 消</el-button>
                <el-button type="primary" @click="handleAddParam">新增</el-button>
                <el-button type="primary" @click="handleEditParam">确 定</el-button>
            </span>
        </el-dialog>
        <!--属性信息修改 end -->


        <!--物流其他信息修改 start-->
        <el-dialog  :visible.sync="visible.others" width="600px">
            <div slot="title" class="dialog-title">
                修改属性信息
            </div>
            <el-form  ref="othersForm"  label-width="80px">
                <el-form-item label="运费设置" prop="product_freight" v-show="product.product_type==1">
                    <div >
                        <el-radio v-model="freightType" :label="2">运费模板</el-radio>
                        <el-select v-model="othersForm.product_freight_id" placeholder="请选择" style='width: 300px;margin-left: 44px' :disabled="freightType==1">
                            <el-option
                                    v-for="item in freightList"
                                    :key="item.template_id"
                                    :label="item.template_name"
                                    :value="item.template_id">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="margin-top: 10px">
                        <el-radio v-model="freightType" :label="1">自定义运费</el-radio>
                        <el-input v-model='othersForm.product_freight' style='width: 300px;margin-left: 30px' :disabled="freightType==2">  </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="绑定卡卷" prop="card_id" v-show="product.product_type==3">
                    <el-select v-model="othersForm.card_id" placeholder="请选择">
                        <el-option
                                v-for="card in cardList"
                                :key="card.card_id"
                                :label="card.card_name"
                                :value="card.card_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="每人限购" prop="limit_num">
                    <el-input-number v-model="othersForm.limit_num"  :min="0" ></el-input-number>
                </el-form-item>
                <el-form-item label="购买权限" prop="privileges">
                    <el-checkbox-group v-model="othersForm.privileges">
                        <el-checkbox  :label="1">普通会员</el-checkbox>
                        <el-checkbox  :label="2">黄金会员</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="开售时间" prop="on_sale_time">
                    <el-date-picker v-model='othersForm.on_sale_time' type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="重新设置开售时间" >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible.others = false">取 消</el-button>
                <el-button type="primary" @click="handleEditOthers">确 定</el-button>
            </span>
        </el-dialog>
        <!--物流其他信息修改 end -->


        <div style="height: 500px"></div>
    </section>
</template>
<script>
    import {getProduct, getBrandList, getCountryList, editProduct, getCardList, getFreightList} from '../../api/api'
    export default {
      data () {
        return {
          product: {},
          visible: {
            base: false,
            price: false,
            params: false,
            others: false
          },
          params: [],
          paramsForm: [],
          baseForm: {
            categories: [],
            product_name: '',
            product_jingle: '',
            brand_id: '',
            product_status: 0,
            is_oversea: 0,
            product_nation_id: '',
            images: ''
          },
          priceForm: {
            product_price: 0,
            product_market_price: 0,
            product_vip_price: 0,
            product_cost_price: 0,
            product_id: 0,
            type: 'price'
          },
          othersForm: {
            product_id: 0,
            limit_num: '',
            product_freight_id: '',
            product_freight: '',
            privileges: [],
            on_sale_time: '',
            card_id: '',
            type: 'others'
          },
          priceFormRules: {
            product_price: [
              {required: true, message: '请输入售价'},
              {pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入合法的金额'}
            ],
            product_vip_price: [
              {pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入合法的金额'}
            ],
            product_market_price: [
              {pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入合法的金额'}
            ],
            product_cost_price: [
              {pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入合法的金额'}
            ]
          },
          brandOptions: [],
          countryOptions: [],
          freightType: 1,
          cardList: [],
          freightList: []
        }
      },
      methods: {
        // 新增规格
        handleAddParam () {
          this.paramsForm.push({label: '', value: ''})
        },
        // 编辑保存规格
        handleEditParam () {
          let params = {
            product_id: this.product.product_id,
            product_params: JSON.stringify(this.paramsForm),
            type: 'params'
          }
          editProduct(params).then(res => {
            if (parseInt(res.status) === 1) {
              this.visible.params = false
              this.handleDetails()
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        },
        // 编辑保存物流/其他
        handleEditOthers () {
          if (parseInt(this.freightType) === 1) {
            this.othersForm.product_freight_id = ''
          } else {
            this.othersForm.product_freight = ''
          }
          editProduct(this.othersForm).then(res => {
            if (parseInt(res.status) === 1) {
              this.visible.others = false
              this.handleDetails()
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        },
        // 删除规格
        handleDeleteParam (index) {
          this.paramsForm.splice(index, 1)
        },
        // 获取基本信息
        handleDetails () {
          let id = this.$route.params.id
          getProduct(id).then(res => {
            this.product = res.data
          })
        },
        // 显示价格修改表单
        handleShowPrice () {
          this.visible.price = true
          this.priceForm.product_price = this.product.product_price
          this.priceForm.product_market_price = this.product.product_market_price
          this.priceForm.product_vip_price = this.product.product_vip_price
          this.priceForm.product_cost_price = this.product.product_cost_price
          if (this.priceForm.product_id === 0) {
            this.priceForm.product_id = this.product.product_id
          }
        },
        // 显示基本信息表单
        handleShowBase () {
          this.visible.base = true
          this.baseForm.product_name = this.product.product_name;
          this.baseForm.product_jingle = this.product.product_jingle;
          this.baseForm.brand_id = this.product.brand_id ? parseInt(this.product.brand_id) : '';
          this.baseForm.product_status = parseInt(this.product.product_status);
          this.baseForm.is_oversea = parseInt(this.product.is_oversea);
          this.baseForm.product_nation_id = this.product.product_nation_id ? parseInt(this.product.product_nation_id) : '';
        },
        // 修改价格信息
        handleSavePrice () {
          this.$refs['priceForm'].validate(valid => {
            if (valid) {
              editProduct(this.priceForm).then(res => {
                if (parseInt(res.status) === 1) {
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  })
                  this.handleDetails()
                  this.visible.price = false
                }
              })
            }
          })
        },
        // 显示其他表格
        handleShowOthers () {
          this.othersForm.product_freight_id = this.product.product_freight_id
          this.othersForm.product_freight = this.product.product_freight
          this.othersForm.product_id = this.product.product_id
          // 如果存在freight_freight_id则是快递模板，反之自定义运费
          if (this.othersForm.product_freight_id) {
            this.freightType = 2;
          } else {
            this.freightType = 1;
          }
          this.product.buy_auth = parseInt(this.product.buy_auth)
          if (this.product.buy_auth === 1) {
            this.othersForm.privileges = [1, 2]
          } else if (this.product.buy_auth === 2) {
            this.othersForm.privileges = [1]
          } else if (this.product.buy_auth === 2) {
            this.othersForm.privileges = [2]
          }
          this.othersForm.on_sale_time = this.product.on_sale_time
          this.othersForm.card_id = this.product.card_id ? parseInt(this.product.card_id) : ''
          this.visible.others = true
        },
        // 显示参数编辑
        handleShowParams () {
          this.paramsForm = []
          if (this.paramsFormatter) {
            for (let param of this.paramsFormatter) {
              let clone = {}
              Object.assign(clone, param)
              this.paramsForm.push(clone)
            }
          }
          this.visible.params = true
        },
        // 获取卡卷列表
        handleCardList () {
          getCardList({pageSize: 1000}).then(res => {
            this.cardList = res.data
          })
        },
        // 获取运费模板列表
        handleFreightList () {
          getFreightList({pageSize: 100}).then(res => {
            this.freightList = res.data
          })
        }
      },
      computed: {
        typeFormatter () {
          return (this.$store.getters.productType)[this.product.product_type - 1];
        },
        paramsFormatter () {
          if (this.product.product_params) {
            return JSON.parse(this.product.product_params)
          } else {
            return []
          }
        },
        authFormatter () {
          if (parseInt(this.product.buy_auth) === 1) {
            return '普通用户，黄金会员'
          }
          if (parseInt(this.product.buy_auth) === 2) {
            return '普通用户'
          }
          if (parseInt(this.product.buy_auth) === 3) {
            return '黄金会员'
          }
          return ''
        }
      },
      mounted () {
        this.handleDetails()
        this.handleCardList()
        this.handleFreightList()
        getBrandList({pageSize: 10000}).then(res => {
          this.brandOptions = res.data
        })
        getCountryList({pageSize: 300}).then(res => {
          this.countryOptions = res.data
        })
      }
    }
</script>
<style scoped rel="stylesheet/sass" lang="sass">
    .el-row
        padding: 0 20px 10px 20px
    .content-head
        margin: 20px 0
        padding-bottom: 5px
        border-bottom: 1px solid #DFE4ED
        font-size: 18px
        div
            display: inline-block
            width: 49%
            vertical-align: bottom
        div:nth-child(2)
            text-align: right
    .sale-statistic
        width: 100%
        thead
            tr
                background-color: #f4f5fa
                th
                    height: 45px
                    color: #878d99
                    font-size: 14px
        td
            text-align: center
            height: 50px
    .show-form
        .el-form-item
            margin-bottom: 0px !important
    .image-list
        img
            left: 0
            width: 100px
            height: 100px
            background-color: #fbfdff
            border-radius: 6px
            margin-left: 5px
            float: left
            margin-top: 5px
    .options
        span:nth-child(n+2)
            margin-left: 20px
    .category-content
        display: inline-block
        span
            background-color: #f5f5f5
            display: inline-block
            padding: 0 5px
        span:nth-child(n+2)
            margin-left: 10px

</style>

